<script>
import {ref} from "vue";
import { createDiscreteApi} from 'naive-ui'

export const {loadingBar} = createDiscreteApi(['loadingBar'])

export const Theme = ref();
export const showSider = ref(false);
export const activeKey = ref('homepage');
</script>

<script setup>
import {darkTheme, NIcon, useMessage} from "naive-ui";
import {
  AddCircleOutline,
  BookOutline as BookIcon, HomeOutline,
  HomeOutline as HomeIcon, List, MenuOutline, SettingsOutline
} from "@vicons/ionicons5";
import { h, onMounted, ref} from "vue";
import router from "@/router";
import { RouterLink } from "vue-router";
import {Coin, DataBoard, Failed, Promotion} from "@element-plus/icons-vue";

const message = useMessage();
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

const changeTheme = () => {
  if (Theme.value == null) {
    localStorage.setItem("GlobeTheme","dark");
    Theme.value = darkTheme;
  } else {
    localStorage.setItem("GlobeTheme",null);
    Theme.value = null;
  }
}

const loginUser = ref(getUser() == null ? {level: '0'} : getUser());
const messageCount = 123;
const showAccept = ref(false);

const menuOptions = [
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/homepage'
          }
        },
        { default: () => "主页"}
    ),
    key: 'homepage',
    icon: renderIcon(HomeIcon)
  },
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/classification'
          }
        },
        { default: () => "分类"}
    ),
    key: 'type',
    icon: renderIcon(BookIcon)
  },
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/more'
          }
        },
        { default: () => "更多"}
    ),
    key: 'more',
    icon: renderIcon(MenuOutline)
  },
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/square'
          }
        },
        { default: () => "接单"}
    ),
    key: 'order',
    icon: renderIcon(AddCircleOutline),
    show: loginUser.value.level >= 20
  }
];
const RiderOptions = [
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/rider'
          }
        },
        { default: () => "主页"}
    ),
    key: 'rider-homepage',
    icon: renderIcon(HomeOutline)
  },
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/rider/order'
          }
        },
        { default: () => "订单管理"}
    ),
    key: 'rider-order',
    icon: renderIcon(Promotion),
    // children: [
    //   {
    //     label: () => h(
    //         RouterLink,{
    //           to: {
    //             path:'/rider/order'
    //           }
    //         },
    //         { default: () => "派送中"}
    //     ),
    //     key: 'delivering',
    //   },
    //   {
    //     label: () => h(
    //         RouterLink,{
    //           to: {
    //             path:'/rider/order'
    //           }
    //         },
    //         { default: () => "已送达"}
    //     ),
    //     key: 'completed',
    //   },
    // ]
  },
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/rider/data'
          }
        },
        { default: () => "数据中心"}
    ),
    key: 'data',
    icon: renderIcon(DataBoard)
  },
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/rider/appeal'
          }
        },
        { default: () => "申诉管理"}
    ),
    key: 'appeal',
    icon: renderIcon(Failed),
    children: [
      {
        label: () => h(
            RouterLink,{
              to: {
                path:'/rider/appeal'
              }
            },
            { default: () => "申诉中"}
        ),
        key: 'appealing',
      },
      {
        label: () => h(
            RouterLink,{
              to: {
                path:'/rider/appeal'
              }
            },
            { default: () => "申诉结果"}
        ),
        key: 'appeal-result',
      },
    ]
  },
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/rider/income'
          }
        },
        { default: () => "收益管理"}
    ),
    key: 'income',
    icon: renderIcon(Coin)
  },
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/rider/rules'
          }
        },
        { default: () => "骑手公约"}
    ),
    key: 'rider-rules',
    icon: renderIcon(List)
  },
  {
    label: () => h(
        RouterLink,{
          to: {
            path:'/rider/setting'
          }
        },
        { default: () => "接单设置"}
    ),
    key: 'rider-settings',
    icon: renderIcon(SettingsOutline)
  }
];


const logout = () => {
  localStorage.removeItem('user');
  router.push('/login');
}

// 设置前置路由守卫
router.beforeEach((to,from,next)=>{
  // 路由中导入-开始
  console.log("to", to)
  console.log("next", next)
  if (to.fullPath !== '/login') {
    loadingBar.start();
  }

  next()
})

onMounted(() => {
  Theme.value = GlobeTheme == "dark" ? darkTheme : null;
  loginUser.value = getUser();
  console.log(activeKey);

  if (loginUser.value == null) {
    router.push('/login');
    message.warning('请先登录一下吧~');
  } else {
    message.success('欢迎回来'+loginUser.value.username);
  }
})
</script>

<template>
  <n-config-provider :theme="Theme">
    <n-layout style="height: 100vh">
      <n-layout-header style="height: 64px; padding: 24px; display:flex; align-items: center" bordered>
        <n-grid :cols="6" item-responsive>
          <n-grid-item span="1">
            <h1>你的校园帮手</h1>
          </n-grid-item>
          <n-grid-item span="4" style="display: flex; align-items: center">
            <div>
              <n-menu
                  v-model:value="activeKey"
                  mode="horizontal"
                  :options="menuOptions"
                  responsive
                  style="width: auto;"
              />
            </div>
            <div style="width: 260px;">
              <n-input placeholder="搜索一下"></n-input>
            </div>
          </n-grid-item>
          <n-grid-item span="1" style="display: flex; align-items: center; justify-content: left;">
            <n-flex size="small">
              <n-popover trigger="hover" :show-arrow="false">
                <template #trigger>
                  <n-avatar round></n-avatar>
                </template>
                <n-flex vertical>
                  <!--      报红不用管，运行正常            -->
                  <router-link to="/user" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);"><n-button quaternary style="width: 100%;">个人中心</n-button></router-link>
                  <router-link to="/rider" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);"><n-button quaternary style="width: 100%;">骑手中心</n-button></router-link>
                  <router-link to="/setting" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);"><n-button quaternary style="width: 100%;">设置</n-button></router-link>
                  <n-button quaternary @click="logout" color="red">退出登录</n-button>
                </n-flex>
              </n-popover>
              <n-badge :value="messageCount" :max="99">
                <router-link to="/message" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);"><n-button quaternary>消息</n-button></router-link>
              </n-badge>
              <router-link to="/order" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);"><n-button quaternary>订单</n-button></router-link>
              <n-button quaternary @click="changeTheme">改变主题</n-button>
              <span style="line-height: 34px">1.0.0</span>
            </n-flex>
          </n-grid-item>
        </n-grid>
      </n-layout-header>
      <n-layout position="absolute" style="top: 64px; bottom: 64px; height: 100%;" has-sider>
        <n-layout has-sider >
          <n-layout-sider
              collapse-mode="width"
              :collapsed-width="80"
              :width="240"
              show-trigger="arrow-circle"
              content-style="padding: 10px;"
              bordered
              style="height: 94vh;"
              v-show="showSider"
          >
            <n-menu
                v-model:value="activeKey"
                :collapsed-width="64"
                :collapsed-icon-size="22"
                :options="RiderOptions"
                accordion
            />
          </n-layout-sider>
          <n-layout-content content-style="padding: 24px;" :native-scrollbar="false">
            <router-view/>
          </n-layout-content>
        </n-layout>
      </n-layout>
    </n-layout>
  </n-config-provider>

</template>

<style scoped>

</style>